<template>
  <div class="box">
   <main>
    <div class="list" v-for="(item,index) in list" :key="index">
      <div class="image">
        <img :src="item.picture" alt="" />
      </div>
      <div class="desc">
        <div class="name">{{item.name}}</div>
        <div class="intr">买一送一</div>
       <div class="jiage">
         <div class="left">
          <div>爆爆团价</div>
        <div class="minbox"><div class="price" style="font-size:16px;color:#ec6a53">¥{{item.min_price}}</div><div>{{item.promotion_info}}</div> </div>
          <del>¥50</del>
        </div>
        <div class="right">
            <div class="btn">马上抢</div>
            <div>{{item.month_saled_content}}</div>
        </div>
       </div>
      </div>
    </div>
   </main>
  </div>
</template>

<script>

import { tuan_list } from "../api"
export default {
    name:'box',
    data(){
        return {
            list:[]
        }
    },
    mounted(){
        tuan_list({status:0}).then((res)=>{
            this.list=res.data.list
            console.log(res.data.list);
        })
    }
}
</script>

<style>
.box{
    flex: 1;
    overflow: auto;
}
main{
    padding: 10px;
    box-sizing: border-box;
    /* height: 90px; */
}
main .list{
    display: flex;
    padding: 10px;
    height: 110px;
}
main .list .image{
    /* height: 120px; */
    padding-top: 10px;
    box-sizing: border-box;
    width: 120px;
}
main .list .image img{
    width: 100%;
    vertical-align: middle;
}
main .list .desc{
    flex: 1;
    margin-left: 10px;
}
main .list .desc .name{
    font-size: 12px;
}
main .list .desc .intr{
    font-size: 14px;
    font-weight: 800;
    margin-top: 5px;
}
main .list .desc .jiage{
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}
main .list .desc .jiage .left div:nth-child(1){
    color: #ec6a53;
    font-size: 12px;
    margin-top: 5px;
}
main .list .desc .jiage .left .minbox div:nth-child(2){
    border: 1px solid coral;
    color: #ec6a53;
    margin-left: 10px;
}
main .list .desc .jiage .left .minbox{
    display: flex;
    margin-top: 5px;
}
main .list .desc .jiage .right .btn{
    width: 73px;
    height: 29px;
    background-color: #ea4c26;
    border-radius: 29px;
    text-align: center;
    line-height: 29px;
    color: white;
    font-size: 14px;
}
main .list .desc .jiage .right div:nth-child(2){
    color: #ea4c26;
    font-size: 12px;
    margin-top: 5px;
    text-align: center;
}
</style>